import React from "react";
import './user.css'
// import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',//用户名
            val: '',//手机号
            password: '',//密码
            s: false,//设置用户名长度
            yong: false,//用户验证
            shou: false,//手机号验证
            changdu: false,//密码长度
            ma: false,//密码设置
            blue: false,//用户名边框
            blue1: false,//手机号边框
            red: false,//密码边框
            bool1: '',
            bool2: '',
            bool3: '',
        }
        this.ref = React.createRef()
        this.ref1 = React.createRef()
        this.ref2 = React.createRef()
    }
    accounthandle(e) {
        this.setState({
            account: e.target.value
        })
    }
    focushandle() {
        this.setState({
            blue: true,
            s: true,
        })

    }
    blurhandle() {
        this.setState({
            blue: false,
            s: false,
            yong: false
        })
        var rega = /^[0-9a-zA-Z\u4e00-\u9fa5_]+$/
        var regb = /^[0-9]+$/
        var regc = /[\u4e00-\u9fa5]/g
        var bool = rega.test(this.state.account);
        var bool2 = regb.test(this.state.account);
        var bool3;
        var Res = this.state.account.match(regc);
        if (Res) {
            var len = Res.length;
            bool3 = len * 2 + this.state.account.length - len <= 14;

        } else {
            bool3 = this.state.account.length <= 14
        }
        if (!bool || bool2) {
            if (this.state.account != '') {
                this.setState({
                    yong: true
                })
            }
        }
        if (!bool3) {
            if (this.state.account != '') {
                this.setState({
                    yong: true
                })
            }
        }
    }
    inp1(e) {
        this.setState({
            val: e.target.value
        })
    }
    focus1() {
        this.setState({
            blue1: true,
        })
    }
    blur1() {
        this.setState({
            blue1: false
        })
        if (!/^1[3-9][0-9]{9}$/.test(this.state.val)) {
            this.setState({
                shou: true
            })
        } else {
            this.setState({
                shou: false
            })
        }
    }
    inphandle(e) {
        this.state.password = e.target.value
        this.setState({
            password: this.state.password,
        })
    }
    focus2() {
        this.setState({
            changdu: true,
            ma: false,
            red: true,
        })

    }
    blur2() {
        this.setState({
            ma: true,
            changdu: false,
        })
        var reg1 = /(?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\w]|_)|(?=.*[^\w]|_)(?=.*[a-zA-Z])/
        var reg2 = /[\u4e00-\u9fa5\s]/
        var bool4 = reg1.test(this.state.password);
        var bool5 = reg2.test(this.state.password);
        var bool6 = this.state.password.length >= 8 && this.state.password.length <= 14
        if (!bool4 || bool5 || !bool6) {
            this.setState({
                ma: true,
            })
        } else {
            this.setState({
                ma: false,
                red: false
            })
        }
    }
    keyup() {
        var reg1 = /(?=.*[0-9])(?=.*[a-zA-Z])|(?=.*[0-9])(?=.*[^\w]|_)|(?=.*[^\w]|_)(?=.*[a-zA-Z])/
        var reg2 = /[(\u4e00-\u9fa5)\s*]/
        this.setState({
            bool1: reg1.test(this.state.password),
            bool2: reg2.test(this.state.password),
            bool3: this.state.password.length >= 8 && this.state.password.length <= 14
        })
        console.log(this.ref.current.className = 'impwhite');
        if (this.state.bool3) {
            this.ref1.current.className = 'inpwhite'
        } else {
            this.ref1.current.className = 'inpred'
        }
        if (this.state.bool1) {
            this.ref2.current.className = 'inpwhite'
        } else {
            this.ref2.current.className = 'inpred'
        }
        // if(this.state.bool2){
        //     this.ref.current.className='inpred'
        // } else{
        //     this.ref.current.className='impwhite'
        // }
    }
    render() {
        return <div id="html">
            <div className="nav-s">
                <span>帮助中心</span> <span>|</span>
                <span>2021 @Baidu</span>
            </div>
            <h1>
                用科技
                <div>让复杂的世界更简单</div>
            </h1>
            <img src="https://passport.baidu.com/static/passpc-account/img/baidu.png" alt="" />
            <div className="app">
                <h3>
                    欢迎注册
                    <p className="p1">已有账号？<a href="#">登录</a></p>
                </h3>
                <form action="" className="form1">
                    {this.state.s && <span className="pa">
                        设置后不可更改,中英文均可,最长14个英文或7个汉字
                    </span>}
                    {this.state.yong && <span className="pba">用户名仅支持中英文、数字和下划线,且不能为纯数字</span>}
                    用户名 &nbsp;
                    <input type="text"
                        placeholder="请设置用户名"
                        className={`input inp1 inputactive ${this.state.blue ? 'blur' : ''}`}
                        onFocus={this.focushandle.bind(this)}
                        onBlur={this.blurhandle.bind(this)}
                        value={this.state.account}
                        onInput={this.accounthandle.bind(this)}
                    />
                    <span className="span1"></span>
                </form>
                <form action="">
                    手机号&nbsp;
                    <input type="text" placeholder="可用于登录和找回密码"
                        value={this.state.val}
                        className={`input inp2 ${this.state.blue1 ? 'blur' : ''}`}
                        onFocus={this.focus1.bind(this)}
                        onBlur={this.blur1.bind(this)}
                        onInput={this.inp1.bind(this)}
                    />
                    {this.state.shou && <span className="span2">手机号码格式不正确</span>}
                </form>
                <form action="" className="mi">
                    {this.state.changdu && <section className="pb cf">
                        <p className='t1 cf' ref={this.ref1}>
                            长度为8~14个字符
                        </p>
                        <p className='t2 cf' ref={this.ref2}>
                            字母/数字以及标点符号至少包含2种
                        </p>
                        <p className={`t3 cf ${this.state.bool2 ? 'inpred' : 'inpwhite'}`} ref={this.ref}>
                            不允许有空格、中文
                        </p>
                        <span></span>
                    </section>}
                    {this.state.ma && <span className="span3" >密码设置不符合要求</span>}
                    密&nbsp;码&nbsp;&nbsp;&nbsp;
                    <input type="text" value={this.state.password} onInput={this.inphandle.bind(this)}
                        placeholder="请设置登录密码"
                        className={`input inp3 ${this.state.red ? 'red' : ''}`}
                        onFocus={this.focus2.bind(this)}
                        onBlur={this.blur2.bind(this)}
                        onKeyUp={this.keyup.bind(this)}
                    />
                </form>
                <form action="">
                    <span className="span4">验证码不正确</span>
                    验证码&nbsp;&nbsp;<input
                        type="text"
                        placeholder="请输入验证码"
                        className="input1 inp4"

                    />
                    <span className="span">获取验证码</span>
                </form>
                <a href="#" className="a">注册</a>
                <div className="log">
                    <input type="checkbox" />阅读并接受<span>《百度用户协议》</span>及<span>《百度隐私权保护声明》</span>
                </div>
            </div>
        </div>
    }
}